<template>
  <div class="app-container" v-if="data.systemInfo">

    <!-- 系统信息 -->
    <el-row :gutter="24">
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>系统信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">主机名</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">启动时间</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">联系人</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">系统描述</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">位置</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">系统服务数</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="data.systemInfo">
                <td>
                  <div class="cell">{{ data.systemInfo.sysName }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.sysUptime }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.sysContact }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.sysDesc }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.sysLocation }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.sysService }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 磁盘信息 -->
    <el-row :gutter="24">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>磁盘信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">名称</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">总容量</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已用</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">使用率</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="disk in data.store.disks">
                <td>
                  <div class="cell">{{ disk.name }}</div>
                </td>
                <td>
                  <div class="cell">{{ disk.total }}</div>
                </td>
                <td>
                  <div class="cell">{{ disk.used }}</div>
                </td>
                <td>
                  <div class="cell">{{ disk.rate }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <!-- cpu信息 -->
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>CPU信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">名称</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">使用率</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="cpu in data.cpuList">
                <td>
                  <div class="cell">{{ cpu.name }}</div>
                </td>
                <td>
                  <div class="cell">{{ cpu.used }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 内存信息 -->
    <el-row :gutter="24">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>内存信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">总内存</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已用</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">使用率</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="data.store.memory">
                <td>
                  <div class="cell">{{ data.store.memory.total }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.store.memory.used }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.store.memory.rate }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {list} from "@/api/boomMonitor/snmp";

export default {
  name: "snmp",
  data() {
    return {
      loading: true,
      data: {}
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      list(this.$route.query).then(response => {
        this.data = response;
        this.loading = false;
      }).catch(e => {
        this.msgError("拒绝失败，请检查IP、团体字、端口号是否正确");
      });
    }
  }
}
</script>

<style scoped>

</style>
